<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <meta charset="UTF-8">
    <style>
        /* 使用与register.html相同的样式 */
    </style>
</head>
<body>
    <div class="form-container">
        <div class="tab">
            <button class="tablinks active" onclick="openLoginType('username')">用户名登录</button>
            <button class="tablinks" onclick="openLoginType('phone')">手机号登录</button>
        </div>

        <div id="username-login" class="login-type">
            <div class="form-group">
                <input type="text" id="loginUsername" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="password" id="loginPassword" placeholder="密码">
            </div>
            <button onclick="loginByUsername()">登录</button>
        </div>

        <div id="phone-login" class="login-type" style="display:none">
            <div class="form-group">
                <input type="text" id="loginPhone" class="phone-input" placeholder="手机号">
                <button onclick="sendLoginCode()" class="code-button">发送验证码</button>
            </div>
            <div class="form-group">
                <input type="text" id="loginCode" placeholder="验证码" maxlength="6">
            </div>
            <button onclick="loginByPhone()">登录</button>
        </div>

        <div class="nav-links">
            <a href="register.html">没有账号？去注册</a>
            <a href="reset-password.html">忘记密码？</a>
        </div>
    </div>

    <script>
        function openLoginType(type) {
            document.getElementById('username-login').style.display = type === 'username' ? 'block' : 'none';
            document.getElementById('phone-login').style.display = type === 'phone' ? 'block' : 'none';
            
            const tabs = document.getElementsByClassName('tablinks');
            for (let tab of tabs) {
                tab.classList.remove('active');
                if (tab.textContent.includes(type === 'username' ? '用户名' : '手机号')) {
                    tab.classList.add('active');
                }
            }
        }

        // 原有的登录相关函数保持不变
        function loginByUsername() { /* ... */ }
        function sendLoginCode() { /* ... */ }
        function loginByPhone() { /* ... */ }
    </script>
</body>
</html> 